<template>
    <div class="layout-padding-auto ">
    <el-table :data="state.dataList" v-loading="state.loading" border
              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
              @selection-change="selectionChangHandle"
              @sort-change="sortChangeHandle">
<!--        <el-table-column type="index" label="#"width="60"/>-->
        <el-table-column prop="status" :label="$t('poheader.status')" show-overflow-tooltip  width="120">
            <template #default="scope">
                <el-tag :type="scope.row.status === 'isFull'?'primary':'info' ">
                    {{ scope.row.status === 'isFull' ? $t('podetail.satisfied') : $t('podetail.notSatisfied') }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="poCode" fixed :label="$t('poheader.poCode')" show-overflow-tooltip  width="200"/>
        <el-table-column prop="poLine" :label="$t('podetail.poLine')" show-overflow-tooltip  width="120"/>
        <el-table-column prop="asnCode" :label="$t('podetail.asnCode')" show-overflow-tooltip  width="250"/>
        <el-table-column prop="requiredDate" :label="$t('podetail.requiredDate')" show-overflow-tooltip width="200"/>
        <el-table-column prop="materialCode" :label="$t('so.materialcode')" show-overflow-tooltip  width="150"/>
        <el-table-column prop="materialName" :label="$t('so.materialname')" show-overflow-tooltip  width="200"/>
        <el-table-column prop="unit" :label="$t('relationD.unit')" show-overflow-tooltip  width="80"/>
        <el-table-column prop="spec" :label="$t('so.materialspec')" show-overflow-tooltip  width="250"/>
        <el-table-column prop="requiredQty" fixed="right" :label="$t('podetail.requiredQty')" show-overflow-tooltip  width="100">
            <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" type='danger' >
                    {{ scope.row.requiredQty }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="asnQty" fixed="right" :label="$t('podetail.assignedQty')" show-overflow-tooltip  width="100">
            <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" type='success' >
                    {{ scope.row.asnQty }}
                </el-tag>
            </template>
        </el-table-column>>
<!--        <el-table-column prop="receivedQty" :label="$t('podetail.receivedQty')" show-overflow-tooltip  width="100"/>-->
        <el-table-column prop="instockQty" fixed="right" :label="$t('podetail.instockQty')" show-overflow-tooltip  width="100">
            <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" type='primary' >
                    {{ scope.row.instockQty }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="leftInstockQty" fixed="right" :label="$t('podetail.leftInstockQty')" show-overflow-tooltip  width="100">
            <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" type='info' >
                    {{ scope.row.leftInstockQty }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="refuseQty" fixed="right" :label="$t('podetail.refuseQty')" show-overflow-tooltip  width="100">
            <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" type='warning' >
                    {{ scope.row.refuseQty }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="manyQty" fixed="right" :label="$t('podetail.manyQty')" show-overflow-tooltip width="100">
            <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" type='primary' >
                    {{ scope.row.manyQty }}
                </el-tag>
            </template>
        </el-table-column>
      <!--        <el-table-column prop="returnQty" :label="$t('podetail.returnQty')" show-overflow-tooltip width="100"/>-->
        <el-table-column prop="wayQty" fixed="right" :label="$t('podetail.wayQty')" show-overflow-tooltip width="100">
             <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" type='success' >
                    {{ scope.row.wayQty - scope.row.instockQty }}
                </el-tag>
             </template>
        </el-table-column>
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
</div>
  <!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef" @refresh="getDataList(false)"/>
</template>

<script setup lang="ts" name="systemSrmPodetail">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {fetchList} from "/@/api/platform/srm/srmPodetail";

// 定义查询字典

// 定义变量内容
const formDialogRef = ref()
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
// 搜索变量
const queryRef = ref()

// 父级点击的行
const parentClickRow = {}

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: fetchList
})
// 清空搜索条件
const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    getDataList()
}

//  table hook
const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    tableStyle
} = useTable(state)

// 通过id进行子表的查询
const query = (row: Object) => {
    // 赋值查询参数
    state.queryForm.masterId = row.id
    // 保存选中的行数据
    Object.assign(parentClickRow, row)
    // 刷新子表数据
    getDataList()
}

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
    selectObjs.value = objs.map(({id}) => id);
    multiple.value = !objs.length;
};

// 暴露变量
defineExpose({
    resetQuery,
    query
});


</script>